 /*
 * @description: 历史会话
 * @Author: along
 * @Date: 2020-09-22
 * @Last Modified by: along
 * @Last Modified time: 2020-10-10
 */
<template>
    <div class="container historyMessage">
        <div class="wrap">
            <!-- header -->
            <div class="header-nav">
                <div class="header-left">
                    <div :style="{width: '100%', display: 'flex'}">
                        <div class="header-new-box" :style="{marginRight: '16px'}">
                            <p class="header-new-box-title">会话时间</p>
                            <el-date-picker
                                v-model="date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="getTableData()"
                            />
                        </div>
                        <div class="header-new-box">
                            <el-button
                                size="small"
                                :style="{width: '52px', height: '32px', color: '#999999'}"
                                @click="fnChangeDate(0)"
                            >
                                今天
                            </el-button>
                            <el-button
                                size="small"
                                :style="{width: '52px', height: '32px', color: '#999999', marginLeft: '16px'}"
                                @click="fnChangeDate(-1)"
                            >
                                昨天
                            </el-button>
                            <el-button
                                size="small"
                                :style="{width: '60px', height: '32px', color: '#999999', marginLeft: '16px'}"
                                @click="fnChangeDate(7)"
                            >
                                近7天
                            </el-button>
                        </div>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">接待客服</p>
                        <!-- clearable -->
                        <el-select
                            v-model="formData.customer"
                            filterable
                            placeholder="请选择"
                            size="small"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in customList"
                                :key="item.kf_no"
                                :label="item.nickname"
                                :value="item.kf_no"
                            />
                        </el-select>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">会话状态</p>
                        <el-select
                            v-model="formData.conversation_status"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in converStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">会话开始方式</p>
                        <el-select
                            v-model="formData.conversation_type"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in convertypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">满意度评分</p>
                        <el-select
                            v-model="formData.satisfaction"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in satisfactionList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">用户姓名</p>
                        <el-input
                            v-model="formData.keyword"
                            placeholder="请输入姓名/昵称/手机号"
                            size="small"
                            clearable
                            suffix-icon="el-icon-search"
                            @change="getTableData(1)"
                            @keyup.native.enter="getTableData(1)"
                        />
                    </div>
                    <div class="header-new-box">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData(1)"
                            :style="{width: '65px', height: '32px'}"
                        >
                            筛选
                        </el-button>
                        <el-button
                            size="small"
                            type="default"
                            :style="{width: '65px', height: '32px', marginLeft: '16px'}"
                            @click="restTable()"
                        >
                            重置
                        </el-button>
                    </div>
                    <div class="header-new-setting">
                        <div class="header-new-list" @click="configHeader()">
                            <i class="zsdxfont zsdxpeizhi"></i>
                            <p class="header-new-table" >配置表头</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /header -->

            <!-- table -->
            <el-table
                :data="tableData"
                style="width: 100%;"
                height="100%"
                ref="historyMessage"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="user_info.true_name"
                    label="用户名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    v-if="tableheader.includes('user_sf')"
                    prop="user_info.agent_level"
                    label="用户身份"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        <p v-if="scope.row.user_info.agent_level >= 0">校园精英</p>
                        <p v-else-if="scope.row.user_info.agent_level == ''">普通用户</p>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="tableheader.includes('nickname')"
                    prop="kf_info.nickname"
                    label="接待客服"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    v-if="tableheader.includes('queue_duration')"
                    prop="stat_info.queue_duration"
                    label="排队时长"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    :render-header="renderHeader"
                    align="left"
                    :width="90"
                >
                    <template slot-scope="scope">
                        {{ scope.row.stat_info.queue_duration | timeFilter }}
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="tableheader.includes('session_duration')"
                    prop="stat_info.session_duration"
                    label="会话时长"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    :render-header="renderHeader2"
                    align="left"
                    :width="90"
                >
                    <template slot-scope="scope">
                        {{ scope.row.stat_info.session_duration | timeFilter }}
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="tableheader.includes('response_duration')"
                    prop="stat_info.response_duration"
                    label="客服首次响应时长"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    :render-header="renderHeader3"
                    align="left"
                    :width="150"
                >
                    <template slot-scope="scope">
                        {{ scope.row.stat_info.response_duration | timeFilter }}
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    v-if="tableheader.includes('avg_response_duration')"
                    prop="stat_info.avg_response_duration"
                    label="客服平均响应时长"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    :render-header="renderHeader4"
                    align="left"
                    :width="150"
                >
                    <template slot-scope="scope">
                        {{ scope.row.stat_info.avg_response_duration | timeFilter }}
                    </template>
                </el-table-column> -->
                <el-table-column
                    v-if="tableheader.includes('solve_status')"
                    prop="solve_status"
                    label="问题解决情况"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="110"
                >
                    <template slot-scope="scope">
                        <p v-if="scope.row.solve_status == 0">--</p>
                        <p v-if="scope.row.solve_status == 1">已解决</p>
                        <p v-if="scope.row.solve_status == -1">未解决</p>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="tableheader.includes('session_status')"
                    prop="session_status"
                    label="会话状态"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        <p v-if="scope.row.session_status == 1">已接入</p>
                        <p v-if="scope.row.session_status == 2">已关闭</p>
                        <p v-if="scope.row.session_status == 0">待接入</p>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="tableheader.includes('session_score')"
                    prop="session_score"
                    label="满意度评分"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="100"
                />
                <el-table-column
                    v-if="tableheader.includes('session_remark')"
                    prop="session_remark"
                    label="会话备注"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="140"
                />
                <el-table-column
                    prop="create_time"
                    label="创建时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                    :width="150"
                >
                    <template slot-scope="scope">
                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="fnCheckDetail(scope.row)"
                        >
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>

            <!-- 配置表头 -->
            <el-dialog
                title="配置列表表头"
                :visible.sync="dialogVisible"
                width="640px"
                :close-on-click-modal="false"
            >
                <div class="__el_dialog">
                    <span class="__el_dialog_title">可以根据需要进行配置列表显示的字段</span>
                    <el-checkbox
                        :indeterminate="isIndeterminate"
                        v-model="checkAll"
                        @change="handleCheckAllChange"
                    >
                        全选
                    </el-checkbox>
                    <el-checkbox-group
                        v-model="checkedCities"
                        @change="handleCheckedCitiesChange"
                    >
                        <el-checkbox
                            v-for="(city,i) in cities"
                            :label="city.value"
                            :key="i"
                        >
                            {{ city.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
                <div
                    slot="footer"
                    class="dialog-footer"
                >
                    <el-button
                        @click="dialogVisible = false"
                        size="small"
                        :style="{width: '120px', height: '36px', marginRight: '32px'}"
                    >
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="configTable()"
                        :style="{width: '120px', height: '36px'}"
                    >
                        确 定
                    </el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 查看详情 -->
        <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
        >
            <div :style="{height: '100vh'}">
                <custom-chat
                    :session_no="session_no"
                    ref="chat"
                    @close="closeChat"
                />
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { mapState} from 'vuex';
import { fnMinuteFormate } from '@/assets/js/utils.js';
import customChat from '@/components/custom/custom-chat.vue';

const LIST = {
    dialogVisible: false,//配置表头弹窗
    customList: [],//客服列表
    converStatusList: [{value: '',label: '全部'},{value: 0,label: '待接入'},{value: 1,label: '已接入'},{value: -1,label: '已关闭'}],//会话状态列表
    convertypeList: [{value: '',label: '全部'},{value: 'customer',label: '用户发起'},{value: 'server',label: '客服主动发起'},{value: 'transfer',label: '转接'}],//会话开始方式列表
    satisfactionList: [{value: '', label: '全部'},{value: 1, label: '一分'},{value: 2, label: '二分'},{value: 3, label: '三分'},{value: 4, label: '四分'},{value: 5, label: '五分'}],//满意度评分
    date: [],
    formData: {
        customer: '',//接待客服
        conversation_status: '',//会话状态
        conversation_type: '',//会话开始方式
        satisfaction: '',//满意度评分
        keyword: ''//客户姓名
    },
    page: {
        now_page: 1,
        total_count: 0,
        page_size: 0
    },
    tableData: [],
    authResult: {},
    //全选
    isIndeterminate: false,
    checkAll: false,
    checkedCities: [],
    cities: [{
        value: 'user_sf',
        label: '用户身份'
    },{
        value: 'nickname',
        label: '接待客服'
    },{
        value: 'queue_duration',
        label: '排队时长'
    },{
        value: 'session_duration',
        label: '会话时长'
    },{
        value: 'response_duration',
        label: '客服首次响应时长'
    },{
        value: 'avg_response_duration',
        label: '客服平均响应时长'
    },{
        value: 'solve_status',
        label: '问题解决情况'
    },{
        value: 'session_status',
        label: '会话状态'
    },{
        value: 'session_score',
        label: '满意度评分'
    },{
        value: 'session_remark',
        label: '会话备注'
    }],
    cityOptions: ['user_sf','nickname','queue_duration','session_duration','response_duration','avg_response_duration','solve_status','session_status','session_score','session_remark'],
    tableheader: ['user_sf','nickname','queue_duration','session_duration','response_duration','avg_response_duration','solve_status','session_status','session_score','session_remark']
};

export default {
    components: {
        customChat
    },
    data () {
        return {
            ...LIST,
            SELF: this,
            drawer: false,//查看详情抽屉
            session_no: '',
            kf_no: '',//自己客服的编号
        };
    },
    filters: {
        timeFilter (val) {
            return fnMinuteFormate(val);
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.global.userInfo,
            authList: state => state.global.authList
        })
    },
    watch: {
        dialogVisible (val) {
            if(!val) this.checkedCities = [];
        }
    },
    mounted () {
        this.getKfList();
        this.config();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/Manage/getHistorySessionList', {
                page_id: page || this.page.now_page,
                start_time: this.date === null ? '' : (this.date.length > 0 ? (parseInt(this.date[0] / 1000)) : ''),
                end_time: this.date === null ? '' : (this.date.length > 0 ? (parseInt(this.date[1] / 1000)) : ''),
                user_keyword: this.formData.keyword,
                kf_no: this.formData.customer,
                session_type: this.formData.conversation_type,
                session_status: this.formData.conversation_status,
                session_score: this.formData.satisfaction
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 获取所有客服列表
         */
        getKfList () {
            this.$post('/Manage/getKfList',{
                type: 99,
            },resp=>{
                if (resp.code == 1) {
                    this.customList = resp.data.list;

                    this.customList.forEach(option => {
                        if(option.nickname == this.userInfo.nickname) {
                            this.$set(this.formData, 'customer', option.kf_no);
                            this.getTableData();
                        }
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 会话时间数据快速查询
         */
        fnChangeDate (type) {
            if(type == 0) {
                this.date = [this.getDateTemp(0), new Date().getTime()];
            } else if (type == -1) {
                this.date = [this.getDateTemp(-1), this.getDateTemp(0)];
            } else if (type == 7) {
                this.date = [this.getDateTemp(-7), this.getDateTemp(0)];
            }
        },

        /**
         * @description 表头全选
         */
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;

            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },

        /**
         * @description 获取表头配置
         */
        config () {
            const flag = localStorage.getItem('CONFIG_HEADER');

            if(!flag) {
                this.tableheader = this.cityOptions;
            } else {
                this.tableheader = JSON.parse(flag);
            }
        },

        /**
         * @description 配置表头
         */
        configHeader () {
            const flag = localStorage.getItem('CONFIG_HEADER');

            if(!flag) {
                this.checkedCities = this.tableheader;
            } else {
                this.checkedCities = JSON.parse(flag);
            }

            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * @description 确定配置表头
         */
        configTable () {
            // console.log('checkedCities', this.checkedCities);

            localStorage.setItem('CONFIG_HEADER', JSON.stringify(this.checkedCities));
            this.$notify({
                title: '提示',
                message: '配置成功',
                type: 'success',
                duration: 2000
            });
            this.config();
            this.getTableData();
            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * @description 查看详情
         */
        fnCheckDetail (row) {
            // if(!this.authList.includes('session')) {
            //     this.$notify({
            //         title: '提示',
            //         message: '请联系管理员添加权限',
            //         type: 'warning',
            //         duration: 2000
            //     });
            //     return;
            // }

            this.drawer = !this.drawer;
            this.$store.commit('global/SET_SHOW', false);
            // console.log('rowddd', row);
            this.$nextTick(()=>{
                this.$refs.chat.setDetailFalg();
                this.$refs.chat.getSession(true);
                this.session_no = row.session_no;
                this.$store.commit('global/SET_SESSION', row.session_no);
                this.$store.commit('global/SET_CHAT', row.chat_no);
            });
        },

        /**
         * @description 关闭侧边栏弹窗
         */
        closeChat () {
            this.drawer = false;
        },

        /**
         * @description 重置
         */
        restTable () {
            this.formData = {
                customer: this.formData.customer,
                conversation_status: '',
                conversation_type: '',
                satisfaction: '',
                keyword: ''
            };
            this.date = [];
            this.getTableData();
        },

        /**
         * @description 查询置顶日期时间戳
         * @param { Number }  type 0:当天 1:明天 -1:昨天
         */
        getDateTemp (type) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * type;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 设置表头
         */
        renderHeader(h){
            return h('span', {}, [
                h('span', {}, '排队时长'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '用户在被匹配到该客服时在排队池中的总时间' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        renderHeader2(h){
            return h('span', {}, [
                h('span', {}, '会话时长'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '用户被客服接入的时间（点击开始会话）到客服手动结束会话或超时结束会话的时间间隔' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        renderHeader3(h){
            return h('span', {}, [
                h('span', {}, '客服首次响应时长'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '客服接入后从用户未命中自动回复的首次询问时间到客服首次回复的时间间隔' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        renderHeader4(h){
            return h('span', {}, [
                h('span', {}, '客服平均响应时长'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '接入后每次从客户未命中自动回复的询问时间到客服回复时间间隔的平均值' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        flex: 1;
        position: relative;
        width: calc(100% - 24px);
        margin: 12px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 32px 0 32px;
        height: calc(100% - 84px);
        .wrap {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header-nav {
            margin-top: 32px;
            margin-bottom: 21px;
            .header-left, .header-right {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .header-new-box {
                display: flex;
                margin-right: 32px;
                align-items: center;
                color: #333333;
                margin-bottom: 24px;
                white-space: nowrap;
                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                }
            }
            .header-new-setting {
                width: 100%;
                height: 14px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                cursor: pointer;
                .header-new-list {
                    display: flex;
                    height: 14px;
                    align-items: center;
                    .zsdxpeizhi {
                        color: #20A0FF;
                        font-size: 14px;
                        margin-right: 4px;
                    }
                    .header-new-table {
                        color: #20A0FF;
                        font-size: 14px;
                    }
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            display: flex;
            justify-content: flex-end;
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
    .el-button-left {
        margin-left: 40px;
    }
    .el-button-right {
        margin-right: 16px;
    }
    .__el_dialog {
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .__el_dialog_title {
            color: #17A298;
            font-size: 12px;
        }
    }
</style>
<style lang="less">
    .historyMessage{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-dialog__header {
            padding-top: 10px;
            box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;
            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }
            .el-icon-close:before {
                color: rgb(194,194,194);
                font-size: 17px;
                font-weight: bold;
            }
            .el-dialog__headerbtn {
                top: 14px;
            }
        }
        .el-dialog__body {
            padding: 30px 58px;
        }
        .__el_dialog {
            .el-checkbox {
                margin-top: 24px;
            }
            .el-checkbox-group {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                .el-checkbox {
                    margin-top: 24px;
                    margin-right: 0px;
                    width: calc(100% / 3);
                }
            }
        }
        .el-drawer {
            width: 988px !important;
        }
        .el-button-right {
            margin-right: 16px;
        }
    }

    //全局样式，弹窗底部按钮
    .dialog-footer {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
    }
</style>